<template>
    <div class="contion">
        <div class="home">
            <div class="home_1">
                <span><b>我的收藏</b></span>
            </div>
            <div class="like">
                <div v-for="(j,k) in likelist" :key="k" class="like_1">
                    <img :src="j.shoe.image" style="width:100px;height:100px;">
                    <div class="like_2">
                        <span style="margin-left:3px;margin-bottom:5px;">{{ j.shoe.name }}</span>
                        <span>￥{{ j.shoe.price }}</span>
                        <div class="like_3">
                            <van-icon name="shopping-cart-o" size="20" color="#FFFFFF" style="margin-top:5px;margin-left:5px"/>
                            <el-button @click="addcart(j)">添加到购物车</el-button>
                            <van-icon name="delete-o" size="25" style="color:#E44F32;margin-top:5px;margin-left:100px" @click="del(j)"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home_6">
                <van-tabbar v-model="active" active-color="#ee0a24" fixed="true" class="h2">
                    <van-tabbar-item icon="wap-home-o" @click="home"/>
                    <van-tabbar-item icon="like-o"/>
                    <div class="home_6_1">
                        <van-tabbar-item icon="shopping-cart-o" @click="cart" style="color:#FFFFFF;margin-top:10px"/>
                    </div>
                    <van-tabbar-item icon="comment-o" @click="message"/>
                    <van-tabbar-item icon="manager-o" @click="my"/>
                  </van-tabbar>                  
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const active = ref(1);
const message = () => {
    router.push('/message')
}
const cart = () => {
    router.push('/cart')
}
const home = () => {
    router.push('/home')
}
const my = () => {
    router.push('/my')
}

let user = ref({})

const datauser = () => {
    axios.get(`http://127.0.0.1:8000/home/user/?user=${localStorage.getItem('userid')}`).then(res=>{
        // console.log(res)
        user.value = res.data.data
    })
}

let shoes = ref([])

const datashoe = () => {
    axios.get("http://127.0.0.1:8000/home/a/").then(res=>{
        console.log(res)
        shoes.value = res.data.data
    })
}

const shoe = () =>{
    router.push('shoe')
}

let likelist = ref([])

const getlike = () =>{
    axios.get(`http://127.0.0.1:8000/home/like/?user=${localStorage.getItem('userid')}`).then(res=>{
        // console.log(res)
        likelist.value = res.data.data
    })
}
onMounted(()=>{
    datauser()
    datashoe()
    getlike()
})

const addcart = (j) =>{
    axios.post("http://127.0.0.1:8000/home/cart/",{user:localStorage.getItem('userid'),shoes:j.shoes}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/cart')
        }
        else{
            ElMessage.error(res.data.msg)
        }
})
}

const del = (j) => {
    axios.delete(`http://127.0.0.1:8000/home/like/?id=${j.id}`).then(res=>{
        console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            getlike()
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.home{
    width: 600px;
    display: flex;
    flex-direction: column;
    /*background-color: aqua;*/
}

.image{
    float: right;
    border-radius: 50px;
    margin-right: 80px;
}

.home_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
    text-align: center;
    font-size:25px;
}

#app {
    position: relative;
    min-height: 100vh;
}

.van-tabbar {
    width: 80%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color: #FFFFFF;
}

.home_6_1{
    width: 50px;
    border-radius: 50px;
    background-color: #E44F32;
}

.like_1{
    display: flex;
    flex-direction: row;
    margin-left:20px;
    margin-top:20px;
}

.like_2{
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}

.like_3{
    display: flex;
    flex-direction: row;
    background-color:#E44F32;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    margin-top: 5px;
}

.like_3 button{
    width: 70px;
    height: 25px;
    font-size: 10px;
    background-color: #E44F32;
    border: none;
    color: #FFFFFF;
    margin-left: 5px;
    margin-top: 20px;
}

</style>